<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   
    <meta name="viewport"        
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>商品详情</title>
    <!-- <link rel="stylesheet" href="../public/css/1.css"> -->
    <!-- <link rel="stylesheet" href="../public/css/5.css"> -->
    <link rel="stylesheet" href="../public/css/reset.css" />
    <link rel="stylesheet" href="../public/css/all_use.css" />
    <link rel="stylesheet" href="../public/css/footer.css">
    <script src="../public/js/utils/utils.js"></script>
    <!-- <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
    <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
</head>
<style>
</style>

<body>
    <div id="app">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item,i) in imgList" :key="i">
                <img :src="item" class="img" />
            </van-swipe-item>
        </van-swipe>
        <div class="cc">
            <div class="cc1">{{splist.spname}}</div>
            <div class="cc2">￥{{splist.price}}</div>
            <div class="cc4">全场包邮</div>
        </div>        
        <p v-html="splist.spparticulars"></p >
        <div class="cc3" @click="router(splist.id)">立即购买</div>
    </div>
</body>
<script type="module">
    import ajax from "../public/js/api/api.js";
    // import { ImagePreview } from 'vant';
    // ImagePreview(
    //     this.imgList
    // );
    var app = new Vue({
        el: '#app',
        data: {
            splist: {},
            imgList:[],
        },
        created() { 
            this.findCommodityById(this.GetRequest().id);
        },
        methods: {
            findCommodityById(id) {
                ajax
                    .findCommodityById({
                        id: id,
                    })
                    .then((res) => {
                        console.log(res.data.data.spimage.split(","),"----res.data.data.spimage.split(",")");
                        this.splist = res.data.data;
                        this.imgList = res.data.data.spimage.split(",");
                        console.log(res.data.data);
                        // for (let index = 0; index < splist.length; index++) {
                        //     this.splist = splist[index] + ',';
                        // }
                    })
            },
            // 获取路径后携带的参数
            GetRequest() {
                var url = location.search; //获取url中"?"符后的字串
                var theRequest = new Object();
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    var strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = unescape(
                            strs[i].split("=")[1]
                        );
                    }
                }
                return theRequest;
            },
            router() {
                window.location.href = `./qrdd.html?id=${this.splist.id}`;
            },
        }
    })
</script>
<style>
    .my-swipe .van-swipe-item {
        color: #fff;
        z-index: -1;
    }
    .img {
        height: 200px;
        width: 100%;
    }
    .cc {
        border-radius: 10px;
        width: 96%;
        margin-left: 2%;
        position: relative;
        top: -20px;
        height: 92px;
        background-color: #fff;
        box-shadow:0px 0px 1px #000;
    }
    .cc1 {
        margin-bottom: 10px;
        line-height: 20px;
        margin-left: 5%;
        padding-top: 5%;
    }
    .cc2 {
        color: red;
        margin-left: 5%;
    }

    .cc3 {
        background: linear-gradient(148deg, #FB6257 0%, #FF291A 100%);
        color: #fff;
        /* border-radius: 29px; */
        text-align: center;
        width: 100%;
        /* margin-left: 25%; */
        height: 40px;
        line-height: 40px;
        position: fixed;
        /* left: 25%; */
        top: 93%;  
    }
    .cc4{
        margin-left: 80%;
        margin-top: -5%;
    }
</style>

</html>